<template>
	<view>
		<!-- <image class="order-bg" mode="widthFix" :src="imageUrl +'list/bg.png'"> -->
		<u-sticky>
			<view class="m-head1">
				<image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
				<u-navbar @rightClick="rightClick" placeholder :autoBack="true" :safeAreaInsetTop="true"
					:bgColor="bgColor">
					<view class="hd-center" slot="center">
						<view class="ul-tabhead1">
							<view class="li" v-for="(item, index) in tabListhd" :key="index"
								:class="actNumhd == index ? 'on' : ''" @click="actNumhd = index">{{ item.tit }}</view>
						</view>
					</view>
				</u-navbar>
				<view class="wp">
					<view class="ul-tabd1">
						<view class="li" v-for="(item, index) in tabList" :key="index"
							:class="actNum == index ? 'on' : ''" @click="actNum = index">{{ item.tit }}</view>
					</view>
				</view>
				<!-- <view class="m-order1">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input num2">{{array[index]}}</view>
						</picker>
						<view class="num">点击筛选车牌</view>
						<image class="icon" mode="widthFix" :src="imageUrl +'list/arr.svg'"></image>
					</view> -->
				<view class="m-order1">
					<view class="inner">
						<view class="current-plate" @click="showPopup = true">
							<view class="num num2">{{ selectedPlate }}</view>
							<image class="icon" mode="widthFix" :src="imageUrl +'list/arr.svg'">
						</view>
						<!-- 自定义弹窗 -->
						<view class="custom-popup" v-if="showPopup">
							<!-- 遮罩层 -->
							<view class="popup-mask popup-mask2" @click="showPopup = false"></view>
							<view class="popup-mask" @click="showPopup = false"></view>
							<!-- 弹窗内容 -->
							<view class="popup-content">
								<view class="plate-section">
									<picker-view class="plate-picker" :value="pickerValue" @change="onPickerChange"
										indicator-style="height: 80rpx;">
										<picker-view-column>
											<view class="plate-item" v-for="(plate, index) in plateList" :key="index"
												:class="{ active: pickerValue[0] === index }">
												{{ plate }}
											</view>
										</picker-view-column>
									</picker-view>
								</view>
								<view class="confirm-btn" @click="handleConfirm">
									确定
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</u-sticky>
		<view class="row-order">
			<view class="wp">
				<view v-if="actNum == 0">
					<view class="ul-tabchd1">
						<view class="li" v-for="(item, index) in list1" :key="index"
							:class="actNumch == index ? 'on' : ''" @click="actNumch = index">{{ item.name }}</view>
					</view>
					<mList>
					</mList>
				</view>
				<view v-if="actNum == 1">
					<view class="ul-tabchd1">
						<view class="li" v-for="(item, index) in list1" :key="index"
							:class="actNumch == index ? 'on' : ''" @click="actNumch = index">{{ item.name }}</view>
					</view>
					<mList>
					</mList>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import mList from '@/components/m-list.vue';
	export default {
		components: {
			mList
		},
		data() {
			return {
				showPopup: false,
				selectedPlate: '',
				pickerValue: [0], // 默认选中第一个
				plateList: [
					'鄂E·E12345',
					'鄂E·E12346',
					'鄂E·E12347',
					'鄂E·E12348',
					'鄂E·E12349'
				],

				// 头部背景色
				bgColor: 'transparent',
				actNum: 0,

				tabList: [{
						tit: '路内停车点'
					},
					{
						tit: '封闭停车场'
					},
				],
				actNumch: 0,
				list1: [{
					name: '全部',
				}, {
					name: '免费离开',
				}, {
					name: '付费离开'
				}, {
					name: '欠费离开'
				}, ],
				array: ['鄂 · EE12345', '鄂 · EE12346', '鄂 · EE12347', ],
				index: 0,

				tabListhd: [{
						tit: '停车缴费'
					},
					{
						tit: '历史停车'
					},
				],
				actNumhd: 0,

			}
		},
		mounted() {
			// 初始化选中第一个车牌
			this.selectedPlate = this.plateList[0]
		},
		methods: {
			// picker值变化
			onPickerChange(e) {
				this.pickerValue = e.detail.value
			},

			// 确认选择
			handleConfirm() {
				const selectedIndex = this.pickerValue[0]
				this.selectedPlate = this.plateList[selectedIndex]
				this.showPopup = false

				// 这里可以添加筛选逻辑
				// uni.showToast({
				// 	title: `已选择：${this.selectedPlate}`,
				// 	icon: 'success'
				// })
			},
			handleCityConfirm(e) {
				this.selectedCity = e.value[0].label
				this.showPicker = false
			},
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = 'transparent'
				} else {
					this.bgColor = 'transparent'
				}
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},

		}
	}
</script>

<style>
	page {
		background-color: #F4FAF7;
	}


	.m-pop {
		position: relative;
	}
</style>